<script>
import mixin from "../../common/mixin";
import { mapGetters } from "vuex";
export default {
  name: "index",
  mixins: [mixin],
  data() {
    return {
      mapIndex: 'postDetail',
      detail: {

      },
      latitude: 31.5497,
      longitude: 120.2991,
      marks: [],
      show: false,
      fileList: [],
      weekList:[
        {
          name: '周一',
          id: 1,
        },
        {
          name: '周二',
          id: 2,
        },
        {
          name: '周三',
          id: 3,
        },
        {
          name: '周四',
          id: 4,
        },
        {
          name: '周五',
          id: 5
        },
        {
          name: '周六',
          id: 6
        },
        {
          name: '周日',
          id: 0
        }
      ],
    }
  },
  computed: {
    ...mapGetters(['cityInfo']),
    weekName() {
      let weekText = (this.detail.week || '').split(',').filter(i => i).map(i => {
        let find = this.weekList.find(item => item.id == i)
        return find ? find.name : ''
      }).join(',')
      return weekText + '' + this.detail.start_time + '~' + this.detail.end_time
    }
  },
  onLoad({ id }) {
    this.$api.getPostDetail({
      id
    }).then(res => {
      this.detail = res
      this.latitude = res.latitude
      this.longitude = res.longitude
      this.marks = [{
        id: res.id,
        latitude: res.latitude,
        longitude: res.longitude,
        iconPath: '/static/location.png'
      }]
      this.$api.getCompanyFileList({
        user_id: res.user_id
      }).then(res2 => {
        this.fileList = res2
      })
    })

    this.$api.getPostList({
      address: this.cityInfo.name,
    }).then(res => {
      this.dataList = res.map(item => {
        return {
          ...item,
          location: 0
        }
      })
      this.getLocationKm()
    })
  },
  methods: {

    Rad(d) { //根据经纬度判断距离
      return d * Math.PI / 180.0;
    },
    getDistance(lat1, lng1, lat2, lng2) {
      if (!lat1 || !lng1 || !lat2 || !lng2) {
        return '0'
      }
      if (lat1 == lat2 && lng1 == lng2) {
        return "0";
      }
      // lat1用户的纬度
      // lng1用户的经度
      // lat2技师的纬度
      // lng2技师的经度
      var radLat1 = this.Rad(lat1);
      var radLat2 = this.Rad(lat2);
      var a = radLat1 - radLat2;
      var b = this.Rad(lng1) - this.Rad(lng2);
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      s = s.toFixed(2) //保留两位小数
      console.log('经纬度计算的距离:' + s)
      return s
    },
    getLocationKm() {
      let _this = this
      uni.getLocation({
        type: 'wgs84',
        success: (_res) => {
          console.log(_res, '定位')
          _this.dataList.forEach(item => {
            item.location = _this.getDistance(_res.latitude, _res.longitude, item.latitude, item.longitude)
          })
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    toDetail() {
      uni.navigateTo({
        url: '/pages/resume/index?id=' + this.detail.id
      })
    },
    toDetail2(item) {
      uni.redirectTo({
        url: '/pages/postDetail/index?id=' + item.id
      })
    },
    showImageList() {
      // 查看企业照片
      // 预览图片
      uni.previewImage({
        urls: this.fileList.map(item => item.image),
        current: 0
      })
    },
    toPhone() {
      uni.makePhoneCall({
        phoneNumber: '4006880051'
      })
    },
  }
}
</script>

<template>
  <div class="detail">
    <u-navbar title="职位详情" :background="{ backgroundColor: 'transparent'}" title-color="#000" :border-bottom="false"></u-navbar>
    <div class="top"></div>
    <div class="card">
      <div class="card-header">
        <div class="line"></div>
        <div class="title">{{ detail.name }}</div>
        <div class="salary">¥ {{ detail.amount }}</div>
      </div>
      <div class="card-body">
        <div class="item">
          <div class="item-title">
            职位详情
            <image class="title-icon" src="/static/detail/title@2x.png"></image>
          </div>
          <div class="content">
            <div> 工作时间：</div>
            <div v-if="detail.category === '时段岗'" style="margin-bottom: 40rpx">
              {{ weekName }}
            </div>
            <div v-if="detail.category === '全职岗'" style="margin-bottom: 40rpx">
              全勤
            </div>
            <div v-if="detail.category === '短期岗'" style="margin-bottom: 40rpx">
              {{ detail.start_time }}~{{ detail.end_time }}
            </div>
            <div v-if="detail.category === '兼职岗'" style="margin-bottom: 40rpx">
              {{ detail.end_time }}
            </div>
            <div> 福利待遇：</div>
            <div style="margin-bottom: 40rpx">
              {{ detail.welfare }}
            </div>
            <div>
              入职须知：
            </div>
            <div>
              {{ detail.desc}}
            </div>
          </div>

          <div class="item-title" style="margin-top: 60rpx">
            详细地址
            <image class="title-icon" src="/static/detail/title@2x.png"></image>
          </div>
          <div class="content" style="margin-top: 20rpx">地址：{{ detail.address }}</div>
          <map :key='mapIndex'  :marks="marks"  class="map-view" :latitude="latitude" :longitude="longitude"  ></map>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="icon-list">
        <div class="icon-item" @click="toPhone">
          <image src="/static/detail/home_kill@2x.png" />
          <div class="icon-name">举报企业</div>
        </div>
        <div class="icon-item">
          <image src="/static/detail/home@2x.png" @click="showImageList"/>
          <div class="icon-name">企业风采</div>
        </div>
        <div class="icon-item" @click="show = true">
          <image src="/static/detail/search@2x.png" />
          <div class="icon-name">更多职位</div>
        </div>
      </div>
      <div class="button" @click="toDetail">投递简历</div>
    </div>

    <u-popup v-model="show" mode="bottom" border-radius="32">
      <div class="post-popup popup">
        <div class="item-title">
          全部职位
          <image class="title-icon" src="/static/detail/title@2x.png"></image>
        </div>
        <div class="list-view">
          <u-empty v-if="!dataList.length" text="暂无数据" mode="list"></u-empty>
          <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
            <div class="list-item" v-for="(item,index) in dataList" :key="index">
              <div class="f-r j-b">
                <div class="title">{{ item.name }}</div>
                <div class="location f-r a-c">
                  <u-icon name="map-fill" size="28"></u-icon>
                  <div style="margin-left: 4rpx">{{ item.location }}km</div>
                </div>
              </div>
              <div class="line"></div>
              <div class="f-r a-c j-b">
                <div class="text">{{ item.user ? item.user.company_name : '' }}</div>
                <div :class="['button primary', item.disabled ? 'info' : '']" @click="toDetail2(item)">查看详情</div>
              </div>
            </div>
            <u-loadmore v-if="dataList.length" :status="loading" />
          </scroll-view>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<style scoped lang="scss">
.popup {
  height: 70vh;
  padding: 40rpx;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  .list-view {
    flex-grow: 1;
    overflow: hidden;
    .list-item {
      background-color: #ffffff;
      padding: 40rpx;
      border-radius: 4rpx;
      margin-bottom: 36rpx;
      .title {
        height: 64rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #000000;
        line-height: 47rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .location {
        font-size: 24rpx;
        color: #666666;
      }
      .line {
        width: 100%;
        border: 1rpx solid #EDEDED;
        margin: 28rpx 0;
      }
      .f-r {
        display: flex;
      }
      .a-c {
        align-items: center;
      }
      .j-b {
        justify-content: space-between;
      }
      .button {
        height: 56rpx;
        padding: 0 36rpx;
        background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        line-height: 56rpx;
        color: #ffffff;
      }
      .button.info {
        background: #B6BDBD;
      }
      .text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #7B7B7B;
        line-height: 23rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
      .tag {
        padding: 0 24rpx;
        height: 34rpx;
        background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        border: 1px solid #05C8CE;
        line-height: 30rpx;
        color: #ffffff;
        margin-right: 12rpx;
      }
      .tag2 {
        background-color: transparent !important;
        border: 1px solid #868686;
        color: #868686;
        font-size: 16rpx;
      }
    }

  }
}
.detail {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 40rpx 24rpx 140rpx 24rpx;
  .footer {
    background-color: #ffffff;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    display: flex;
    align-items: center;
    padding-bottom: 40rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
    left: 0;
    padding-top: 30rpx;
    .icon-list {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20rpx;
    }
    image {
      width: 44rpx;
      height: 44rpx;
    }
    .icon-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .icon-name {
      height: 22rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16rpx;
      color: #7B7B7B;
      line-height: 19rpx;
      margin-top: 10rpx;
    }

    .button {
      flex-grow: 1;
      margin: 0 30rpx;
      text-align: center;
      line-height: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
    }
  }
  .map-view {
    width: 100%;
    height: 384rpx;
  }
  .card {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 16rpx;
    .card-header {
      height: 178rpx;
      display: flex;
      align-items: center;
      border: 1rpx solid #DADADA;
      .line {
        width: 8rpx;
        height: 54rpx;
        background-color: #05C8CE;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }
      .title {
        height: 90rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 56rpx;
        color: #303030;
        text-align: left;
        padding-left: 20rpx;
        font-style: normal;
        text-transform: none;
        flex-grow: 1;
      }
      // 工资
      .salary {
        height: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #05C8CE;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-left: 30rpx;
        margin-right: 60rpx;
      }

    }
    .card-body {
      .item {
        margin: 50rpx;
        .item-title {
          height: 44rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: #303030;
          line-height: 38rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          position: relative;
          margin-bottom: 20rpx;
          .title-icon {
            width: 24rpx;
            height: 24rpx;
            position: absolute;
            left: -6rpx;
            bottom: 0rpx;
          }
        }
      }
      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #3D3D3D;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 30rpx;
      }
    }
  }
  .top {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 522rpx;
    background: linear-gradient( 180deg, #05C8CE 0%, rgba(223,254,255,0.5) 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
}
</style>
